85:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 87:Te67a,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme to match Vercel-inspired dark aesthetic with blue accents */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --font-serif: 'Source Serif 4', 'Source Serif 4 Fallback'; --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.05; --shadow-color: #000000; } .dark { --background: rgb(255, 255, 255); --foreground: rgb(0, 0, 0); --card: rgb(255, 255, 255); --card-foreground: rgb(0, 0, 0); --popover: rgb(255, 255, 255); --popover-foreground: rgb(0, 0, 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: rgb(255, 255, 255); --secondary-foreground: rgb(0, 0, 0); --muted: rgb(255, 255, 255); --muted-foreground: rgb(0, 0, 0); --accent: rgb(255, 255, 255); --accent-foreground: rgb(0, 0, 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.439 0 0); --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.05; --shadow-color: #000000; } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-serif: 'Source Serif 4', 'Source Serif 4 Fallback'; /* computed shadow variables below - do not modify */ --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), var(--shadow-x) var(--shadow-y) var(--shadow-blur) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), var(--shadow-x) var(--shadow-y) calc(max(0px, var(--shadow-blur) * 2 - 2px)) calc(var(--shadow-spread) - 2px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(max(0px, var(--shadow-blur) * 3 - 4px)) calc(var(--shadow-spread) - 4px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(max(0px, var(--shadow-blur) * 5 - 6px)) calc(var(--shadow-spread) - 6px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent); --shadow: var(--shadow-md); --color-shadow-color: var(--shadow-color); --shadow-opacity: var(--shadow-opacity); --shadow-spread: var(--shadow-spread); --shadow-blur: var(--shadow-blur); --shadow-y: var(--shadow-y); --shadow-x: var(--shadow-x); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" import { Geist as V0_Font_Geist, Geist_Mono as V0_Font_Geist_Mono, Source_Serif_4 as V0_Font_Source_Serif_4 } from 'next/font/google' // Initialize fonts V0_Font_Geist({ weight: ["100","200","300","400","500","600","700","800","900"] }) V0_Font_Geist_Mono({ weight: ["100","200","300","400","500","600","700","800","900"] }) V0_Font_Source_Serif_4({ weight: ["200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: "PDF Chat Assistant", description: "Upload PDFs and chat with AI about their content", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}>{children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { AuthForm } from "@/components/auth-form" import { Dashboard } from "@/components/dashboard" export default function Home() { const [isAuthenticated, setIsAuthenticated] = useState(false) const [user, setUser] = useState<{ username: string; email: string } | null>(null) const handleAuth = (userData: { username: string; email: string }) => { setUser(userData) setIsAuthenticated(true) } const handleLogout = () => { setUser(null) setIsAuthenticated(false) } if (!isAuthenticated) { return } return } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@ai-sdk/react": "2.0.53", "ai": "5.0.53" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/api/chat/route.ts" isMerged="true" import { convertToModelMessages, streamText, type UIMessage } from "ai" export const maxDuration = 30 export async function POST(req: Request) { const { messages, pdfContent }: { messages: UIMessage[]; pdfContent?: string } = await req.json() const prompt = convertToModelMessages(messages) // Add PDF context to the system message if available if (pdfContent) { prompt.unshift({ role: "system", content: `You are a helpful AI assistant that can answer questions about PDF documents. The user has uploaded a PDF with the following content: ${pdfContent} Please answer questions about this document accurately and helpfully. If the user asks about something not in the document, let them know that the information isn't available in the uploaded PDF.`, }) } const result = streamText({ model: "openai/gpt-4o-mini", messages: prompt, abortSignal: req.signal, maxOutputTokens: 2000, temperature: 0.7, }) return result.toUIMessageStreamResponse({ onFinish: async ({ isAborted }) => { if (isAborted) { console.log("Chat aborted") } }, }) } [V0_FILE]typescriptreact:file="app/api/pdf-extract/route.ts" isMerged="true" import { generateObject } from "ai" import { z } from "zod" const pdfAnalysisSchema = z.object({ title: z.string().describe("The title or main topic of the document"), summary: z.string().describe("A brief summary of the document content"), keyPoints: z.array(z.string()).describe("Main points or sections from the document"), documentType: z.string().describe("Type of document (resume, report, article, etc.)"), extractedText: z.string().describe("Key text content from the document"), }) export async function POST(req: Request) { try { const formData = await req.formData() const file = formData.get("file") as File if (!file) { return Response.json({ error: "No file provided" }, { status: 400 }) } if (file.type !== "application/pdf") { return Response.json({ error: "File must be a PDF" }, { status: 400 }) } // Convert file to base64 for AI processing const bytes = await file.arrayBuffer() const base64 = Buffer.from(bytes).toString("base64") const { object } = await generateObject({ model: "openai/gpt-4o-mini", schema: pdfAnalysisSchema, messages: [ { role: "user", content: [ { type: "text", text: "Please analyze this PDF document and extract the key information:", }, { type: "file", data: base64, mediaType: "application/pdf", filename: file.name, }, ], }, ], }) return Response.json({ success: true, analysis: object, filename: file.name, size: file.size, }) } catch (error) { console.error("PDF processing error:", error) return Response.json({ error: "Failed to process PDF" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/subscription-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { Check, Zap, Crown, Rocket } from "lucide-react" interface SubscriptionModalProps { isOpen: boolean onClose: () => void currentPlan: string } const plans = [ { id: "free", name: "Free Plan", price: "$0", period: "forever", icon: Zap, features: ["2 PDFs per day", "10 PDFs per month", "10MB file size limit", "Basic chat support", "10GB storage"], limitations: ["Limited daily uploads", "Basic AI responses", "No priority support"], }, { id: "pro", name: "Pro Plan", price: "$19", period: "per month", icon: Crown, popular: true, features: [ "50 PDFs per day", "500 PDFs per month", "100MB file size limit", "Advanced AI responses", "Priority chat support", "100GB storage", "Export conversations", "Custom AI prompts", ], limitations: [], }, { id: "enterprise", name: "Enterprise", price: "$99", period: "per month", icon: Rocket, features: [ "Unlimited PDFs", "500MB file size limit", "Advanced AI with GPT-4", "24/7 priority support", "1TB storage", "Team collaboration", "API access", "Custom integrations", "Advanced analytics", ], limitations: [], }, ] export function SubscriptionModal({ isOpen, onClose, currentPlan }: SubscriptionModalProps) { const [selectedPlan, setSelectedPlan] = useState(currentPlan) const [isLoading, setIsLoading] = useState(false) const handleUpgrade = async (planId: string) => { setIsLoading(true) // Simulate upgrade process await new Promise((resolve) => setTimeout(resolve, 2000)) setSelectedPlan(planId) setIsLoading(false) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/usage-tracker.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { AlertTriangle, TrendingUp } from "lucide-react" interface UsageData { pdfsProcessed: number chatMessages: number storageUsed: number storageTotal: number dailyPdfLimit: number monthlyPdfLimit: number dailyPdfUsed: number monthlyPdfUsed: number maxFileSize: number } interface UsageTrackerProps { usage: UsageData plan: string } export function UsageTracker({ usage, plan }: UsageTrackerProps) { const dailyUsagePercent = (usage.dailyPdfUsed / usage.dailyPdfLimit) * 100 const monthlyUsagePercent = (usage.monthlyPdfUsed / usage.monthlyPdfLimit) * 100 const storagePercent = usage.storageUsed const isNearLimit = dailyUsagePercent > 80 || monthlyUsagePercent > 80 || storagePercent > 80 return (

{/* Usage Overview */}

PDFs Processed {plan}

{usage.pdfsProcessed}

+12% from last month

Chat Messages

{usage.chatMessages}

+8% from last month

Storage Used {storagePercent > 80 && }

{storagePercent}%

{(usage.storageUsed * usage.storageTotal) / 100} GB of {usage.storageTotal} GB used

{/* Plan Limits */} Plan Limits & Usage {isNearLimit && } Your current usage against plan limits

Daily PDF Limit 100 ? "text-black" : ""}> {usage.dailyPdfUsed} / {usage.dailyPdfLimit}

100 ? "[&>div]:bg-black" : ""}`} /> {dailyUsagePercent > 80 &&

Approaching daily limit

}

Monthly PDF Limit 100 ? "text-black" : ""}> {usage.monthlyPdfUsed} / {usage.monthlyPdfLimit}

100 ? "[&>div]:bg-black" : ""}`} /> {monthlyUsagePercent > 80 &&

Approaching monthly limit

}

File Size Limit

Maximum file size per upload

{usage.maxFileSize} MB

{isNearLimit && (

Usage Warning

You're approaching your plan limits. Consider upgrading to avoid service interruption.

)}

) } [V0_FILE]typescriptreact:file="components/auth-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Mail, Lock, User, HelpCircle } from "lucide-react" interface AuthFormProps { onAuth: (userData: { username: string; email: string }) => void } export function AuthForm({ onAuth }: AuthFormProps) { const [isLoading, setIsLoading] = useState(false) const demoCredentials = { username: "rohan", email: "rohan@gmail.com", password: "girls", } const handleDemoLogin = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate authentication await new Promise((resolve) => setTimeout(resolve, 1000)) onAuth({ username: demoCredentials.username, email: demoCredentials.email, }) setIsLoading(false) } return (

Sign In Enter your credentials to access your account ) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { CreditCard, LogOut, MessageSquare, Settings, Shield, User } from "lucide-react" import { ChatInterface } from "@/components/chat-interface" import { SubscriptionModal } from "@/components/subscription-modal" import { UsageTracker } from "@/components/usage-tracker" interface DashboardProps { user: { username: string; email: string } onLogout: () => void } export function Dashboard({ user, onLogout }: DashboardProps) { const [activeTab, setActiveTab] = useState("analytics") const [showSubscriptionModal, setShowSubscriptionModal] = useState(false) const [currentPlan, setCurrentPlan] = useState("free") const openYouTubeLink = () => { window.open("https://youtu.be/dQw4w9WgXcQ?si=HmDFfGrDfiBJGPW0", "_blank") } // Mock usage data with more realistic values const usageData = { pdfsProcessed: 1, chatMessages: 4, storageUsed: 68, storageTotal: 10, dailyPdfLimit: 2, monthlyPdfLimit: 10, dailyPdfUsed: 3, // Over limit to show warning monthlyPdfUsed: 1, maxFileSize: 10, } if (activeTab === "chat") { return setActiveTab("analytics")} /> } return (

{/* Header */}

{user.username.slice(0, 2)}

{`rohan singh`}

{user.email}

{currentPlan} Plan

Analytics Account Security Billing Billing & Subscription Manage your subscription and billing information

{currentPlan} Plan

{currentPlan === "free" ? "Free/month • No billing" : "$19/month • Billed monthly"}

Daily PDF Limit: {usageData.dailyPdfLimit}

Monthly PDF Limit: {usageData.monthlyPdfLimit}

Max File Size: {usageData.maxFileSize} MB

Storage: {usageData.storageTotal} GB

Active

{currentPlan !== "free" && ( )}

{currentPlan !== "free" && (

Next Billing Date

Your next payment of $19.00 will be charged on{" "} {new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toLocaleDateString()}

)} Account Settings Manage your account information and preferences

Username

{user.username}

{user.email}

Security Settings Manage your security preferences and data

Two-Factor Authentication

Add an extra layer of security

Data Export

Download your chat history and documents

setShowSubscriptionModal(false)} currentPlan={currentPlan} />

) } [V0_FILE]typescriptreact:file="components/chat-interface.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef } from "react" import { useChat } from "@ai-sdk/react" import { DefaultChatTransport } from "ai" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Plus, Upload, Send, FileText, Bot, User, Paperclip, CheckCircle, MessageSquare } from "lucide-react" import { cn } from "@/lib/utils" interface ChatInterfaceProps { user: { username: string; email: string } onBack: () => void } interface Chat { id: string name: string lastMessage: string timestamp: string hasDocument: boolean pdfContent?: string } interface PDFAnalysis { title: string summary: string keyPoints: string[] documentType: string extractedText: string } export function ChatInterface({ user, onBack }: ChatInterfaceProps) { const [chats, setChats] = useState([ { id: "1", name: "Resume Analysis", lastMessage: "This PDF is a resume for Himanshu Singh...", timestamp: "12:52", hasDocument: true, pdfContent: "Sample resume content for Himanshu Singh with software engineering experience...", }, ]) const [activeChat, setActiveChat] = useState("1") const [uploadProgress, setUploadProgress] = useState(0) const [isUploading, setIsUploading] = useState(false) const [pdfAnalysis, setPdfAnalysis] = useState(null) const [newMessage, setNewMessage] = useState("") const fileInputRef = useRef(null) const currentChat = chats.find((chat) => chat.id === activeChat) const openYouTubeLink = () => { window.open("https://youtu.be/dQw4w9WgXcQ?si=HmDFfGrDfiBJGPW0", "_blank") } const { messages, sendMessage, status } = useChat({ transport: new DefaultChatTransport({ api: "/api/chat", body: { pdfContent: currentChat?.pdfContent, }, }), initialMessages: activeChat === "1" ? [ { id: "1", role: "user", parts: [{ type: "text", text: "what is this pdf about" }], }, { id: "2", role: "assistant", parts: [ { type: "text", text: "This PDF is a resume for Himanshu Singh. It outlines his education, technical skills (programming languages, frameworks, tools, databases), and professional experience as a Software Engineer at Wherehouse.io and internships at Brandful and EVE.", }, ], }, { id: "3", role: "user", parts: [{ type: "text", text: "what skills did this guy have" }], }, { id: "4", role: "assistant", parts: [ { type: "text", text: "Based on the provided context, Himanshu Singh possesses the following skills:\n\n**Programming Languages:** JavaScript, TypeScript, Python, Java\n**Frontend:** React, Next.js, HTML, CSS, Tailwind CSS\n**Backend:** Node.js, Express.js, REST APIs\n**Databases:** MongoDB, PostgreSQL, MySQL\n**Tools & Technologies:** Git, Docker, AWS, Vercel\n**Other:** Agile development, problem-solving, team collaboration", }, ], }, ] : [], }) const handleSendMessage = () => { if (!newMessage.trim()) return sendMessage({ text: newMessage }) setNewMessage("") } const handleFileUpload = async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return setIsUploading(true) setUploadProgress(0) try { // Simulate upload progress const progressInterval = setInterval(() => { setUploadProgress((prev) => { if (prev >= 90) { clearInterval(progressInterval) return 90 } return prev + 10 }) }, 200) const formData = new FormData() formData.append("file", file) const response = await fetch("/api/pdf-extract", { method: "POST", body: formData, }) const result = await response.json() if (result.success) { setUploadProgress(100) setPdfAnalysis(result.analysis) // Create new chat with PDF content const newChatId = Date.now().toString() const newChat: Chat = { id: newChatId, name: result.analysis.title || file.name, lastMessage: result.analysis.summary, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), hasDocument: true, pdfContent: result.analysis.extractedText, } setChats((prev) => [newChat, ...prev]) setActiveChat(newChatId) setTimeout(() => { setIsUploading(false) setUploadProgress(0) }, 1000) } else { throw new Error(result.error) } } catch (error) { console.error("Upload failed:", error) setIsUploading(false) setUploadProgress(0) } // Reset file input if (fileInputRef.current) { fileInputRef.current.value = "" } } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } const createNewChat = () => { setActiveChat("") setPdfAnalysis(null) } return (

{/* Sidebar */}

{/* Sidebar Header */}

Chat PDF

{/* Chat List */}

{chats.map((chat) => (

setActiveChat(chat.id)} >

{chat.name} {chat.timestamp}

{chat.lastMessage}

{chat.hasDocument && ( PDF )}

))}

{user.email}

{/* Main Chat Area */}

{activeChat ? ( <>

PDF Chat Assistant

Upload your PDF and start chatting with AI

Chat with AI

Ask questions about your uploaded PDF

{messages.length} messages

{/* Messages */}

{messages.map((message, index) => (

{message.role === "assistant" && (

)}

{message.parts.map((part, partIndex) => { if (part.type === "text") { return (

{part.text}

) } return null })}

{message.role === "user" && (

)}

17:52

))} {status === "in_progress" && (

)}

{/* Message Input */}

setNewMessage(e.target.value)} onKeyPress={handleKeyPress} className="pr-12 bg-white border-gray-200" disabled={status === "in_progress"} />

) : ( /* Welcome Screen */

PDF Chat Assistant

Upload your PDF and start chatting with AI

{isUploading ? (

{uploadProgress === 100 ? ( <>

PDF processed successfully!

) : (

Processing PDF... {uploadProgress}%

)}

) : ( <>

Supported format: PDF • Max size: 10MB

)}

) }7c:["$","$L85",null,{"chatId":"u6ao4W84Iae","children":["$","$L86",null,{"data":{"@\"active-block\",\"u6ao4W84Iae\",":{"id":"b_yaxp5zdD1MC","messageId":"E2LMGPW5TiIRVZlfc4jLfo9WVMgKQsjw","source":"$87","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"pdf-chat-assistant","type":"code-project","project":"pdf-chat-assistant","taskNameActive":"Updating chat interface","taskNameComplete":"Updated chat interface"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"u6ao4W84Iae\",":false,"":null},"children":"$L88"}]}]

About

Tags

Share

About

Tags

Share

More from bunsdev

More Templates Like This